<template>
  <div class="security-dashboard-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>安全态势感知仪表板</h1>
      <div class="header-info">
        <span class="update-time">最后更新: {{ lastUpdateTime }}</span>
        <el-button type="primary" @click="refreshDashboard">
          <el-icon><Refresh /></el-icon> 刷新
        </el-button>
      </div>
    </div>

    <!-- 安全概览卡片 -->
    <div class="overview-cards">
      <el-card class="overview-card">
        <div class="card-content">
          <div class="card-icon security-risk">
            <el-icon><Warning /></el-icon>
          </div>
          <div class="card-info">
            <div class="card-title">当前风险评分</div>
            <div class="card-value" :class="getRiskLevelClass(overallRiskScore)">{{ overallRiskScore }}</div>
            <div class="card-desc">{{ getRiskLevelDescription(overallRiskScore) }}</div>
          </div>
        </div>
      </el-card>
      
      <el-card class="overview-card">
        <div class="card-content">
          <div class="card-icon vulnerability">
            <el-icon><Vulnerability /></el-icon>
          </div>
          <div class="card-info">
            <div class="card-title">未修复漏洞</div>
            <div class="card-value">{{ totalVulnerabilities }}</div>
            <div class="card-desc">
              <span class="severity-badge critical">{{ criticalVulnerabilities }}</span>
              <span class="severity-badge high">{{ highVulnerabilities }}</span>
              <span class="severity-badge medium">{{ mediumVulnerabilities }}</span>
            </div>
          </div>
        </div>
      </el-card>
      
      <el-card class="overview-card">
        <div class="card-content">
          <div class="card-icon compliance">
            <el-icon><Check /></el-icon>
          </div>
          <div class="card-info">
            <div class="card-title">合规率</div>
            <div class="card-value">{{ complianceRate }}%</div>
            <div class="card-desc">{{ complianceStatus }}</div>
          </div>
        </div>
      </el-card>
      
      <el-card class="overview-card">
        <div class="card-content">
          <div class="card-icon incident">
            <el-icon><Bell /></el-icon>
          </div>
          <div class="card-info">
            <div class="card-title">未处理事件</div>
            <div class="card-value">{{ pendingIncidents }}</div>
            <div class="card-desc">{{ incidentTrend }}</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 图表区域 -->
    <div class="charts-container">
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>风险趋势</span>
            <el-select v-model="chartTimeRange" placeholder="选择时间范围" size="small">
              <el-option label="近7天" value="7d" />
              <el-option label="近30天" value="30d" />
              <el-option label="近90天" value="90d" />
              <el-option label="近1年" value="1y" />
            </el-select>
          </div>
        </template>
        <div ref="riskTrendChart" class="chart" style="height: 300px"></div>
      </el-card>
      
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>漏洞分布</span>
            <el-select v-model="vulnerabilityView" placeholder="查看方式" size="small">
              <el-option label="按严重程度" value="severity" />
              <el-option label="按类型" value="type" />
              <el-option label="按资产" value="asset" />
            </el-select>
          </div>
        </template>
        <div ref="vulnerabilityChart" class="chart" style="height: 300px"></div>
      </el-card>
      
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>合规状态</span>
            <el-select v-model="complianceStandard" placeholder="选择标准" size="small">
              <el-option label="全部标准" value="all" />
              <el-option label="ISO 27001" value="iso27001" />
              <el-option label="PCI DSS" value="pci_dss" />
              <el-option label="NIST" value="nist" />
              <el-option label="自定义基线" value="custom" />
            </el-select>
          </div>
        </template>
        <div ref="complianceChart" class="chart" style="height: 300px"></div>
      </el-card>
      
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>安全事件趋势</span>
            <el-select v-model="incidentTimeRange" placeholder="选择时间范围" size="small">
              <el-option label="近7天" value="7d" />
              <el-option label="近30天" value="30d" />
              <el-option label="近90天" value="90d" />
            </el-select>
          </div>
        </template>
        <div ref="incidentChart" class="chart" style="height: 300px"></div>
      </el-card>
    </div>

    <!-- 最近活动和警报 -->
    <div class="activity-alerts-container">
      <el-card class="activity-card">
        <template #header>
          <div class="card-header">
            <span>最近安全活动</span>
            <el-button size="small" @click="viewAllActivities">查看全部</el-button>
          </div>
        </template>
        <div class="activity-list">
          <div v-for="activity in recentActivities" :key="activity.id" class="activity-item">
            <div class="activity-icon" :class="getActivityIconClass(activity.type)">
              <el-icon><component :is="getActivityIcon(activity.type)" /></el-icon>
            </div>
            <div class="activity-content">
              <div class="activity-text">{{ activity.description }}</div>
              <div class="activity-time">{{ activity.time }}</div>
            </div>
          </div>
        </div>
      </el-card>
      
      <el-card class="alerts-card">
        <template #header>
          <div class="card-header">
            <span>高优先级警报</span>
            <el-button size="small" @click="viewAllAlerts">查看全部</el-button>
          </div>
        </template>
        <div class="alerts-list">
          <div v-for="alert in highPriorityAlerts" :key="alert.id" class="alert-item" :class="getAlertSeverityClass(alert.severity)">
            <div class="alert-icon">
              <el-icon><component :is="getAlertIcon(alert.severity)" /></el-icon>
            </div>
            <div class="alert-content">
              <div class="alert-title">{{ alert.title }}</div>
              <div class="alert-info">{{ alert.affectedAsset }} · {{ alert.time }}</div>
            </div>
            <el-button size="small" type="text" @click="handleAlert(alert)">处理</el-button>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 快速访问 -->
    <div class="quick-access-container">
      <h3>快速访问</h3>
      <div class="quick-access-grid">
        <div class="quick-access-item" @click="navigateTo('security-compliance')">
          <div class="access-icon compliance">
            <el-icon><Document /></el-icon>
          </div>
          <div class="access-title">安全合规性</div>
        </div>
        <div class="quick-access-item" @click="navigateTo('security-knowledge-base')">
          <div class="access-icon knowledge">
            <el-icon><Document /></el-icon>
          </div>
          <div class="access-title">安全知识库</div>
        </div>
        <div class="quick-access-item" @click="navigateTo('security-incident-response')">
          <div class="access-icon incident">
            <el-icon><Bell /></el-icon>
          </div>
          <div class="access-title">事件响应</div>
        </div>
        <div class="quick-access-item" @click="navigateTo('security-report')">
          <div class="access-icon report">
            <el-icon><DataLine /></el-icon>
          </div>
          <div class="access-title">安全报告</div>
        </div>
        <div class="quick-access-item" @click="navigateTo('security-baseline')">
          <div class="access-icon baseline">
            <el-icon><Setting /></el-icon>
          </div>
          <div class="access-title">安全基线</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick, watch } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'
import {
  Refresh,
  Warning,
  Check,
  Bell,
  Document,
  DataLine,
  Setting,
  Search,
  Download,
  Upload
} from '@element-plus/icons-vue'

// 自定义图标组件
const Vulnerability = {
  name: 'Vulnerability',
  template: '<svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor"><path d="M864 160H160c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h704c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 632H200V232h624v560zM512 320c-70.7 0-128 57.3-128 128s57.3 128 128 128 128-57.3 128-128-57.3-128-128-128zm0 208c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"></path></svg>'
}

// 响应式数据
const loading = ref(false)
const lastUpdateTime = ref('')
const chartTimeRange = ref('30d')
const vulnerabilityView = ref('severity')
const complianceStandard = ref('all')
const incidentTimeRange = ref('30d')

// 图表实例
const riskTrendChart = ref(null)
const vulnerabilityChart = ref(null)
const complianceChart = ref(null)
const incidentChart = ref(null)

// 概览数据
const overallRiskScore = ref(68)
const totalVulnerabilities = ref(76)
const criticalVulnerabilities = ref(3)
const highVulnerabilities = ref(15)
const mediumVulnerabilities = ref(28)
const complianceRate = ref(76)
const pendingIncidents = ref(8)

// 模拟最近活动数据
const recentActivities = ref([
  {
    id: 'ACT-001',
    type: 'scan_completed',
    description: '安全扫描完成，发现12个新漏洞',
    time: '10分钟前'
  },
  {
    id: 'ACT-002',
    type: 'vulnerability_fixed',
    description: '成功修复3个高危漏洞',
    time: '1小时前'
  },
  {
    id: 'ACT-003',
    type: 'compliance_check',
    description: 'PCI DSS合规性检查完成，合规率82%',
    time: '2小时前'
  },
  {
    id: 'ACT-004',
    type: 'incident_resolved',
    description: 'SQL注入攻击事件已成功处理',
    time: '4小时前'
  },
  {
    id: 'ACT-005',
    type: 'baseline_deployed',
    description: 'Windows Server安全基线已部署到5台服务器',
    time: '昨天'
  }
])

// 模拟高优先级警报数据
const highPriorityAlerts = ref([
  {
    id: 'ALERT-001',
    title: '检测到疑似SQL注入攻击',
    severity: 'critical',
    affectedAsset: 'Web服务器-01',
    time: '5分钟前'
  },
  {
    id: 'ALERT-002',
    title: '发现未授权的远程访问尝试',
    severity: 'high',
    affectedAsset: '数据库服务器-01',
    time: '20分钟前'
  },
  {
    id: 'ALERT-003',
    title: '系统存在严重漏洞CVE-2023-46604',
    severity: 'critical',
    affectedAsset: '应用服务器-02',
    time: '1小时前'
  },
  {
    id: 'ALERT-004',
    title: '检测到可疑的网络流量模式',
    severity: 'high',
    affectedAsset: '防火墙-01',
    time: '2小时前'
  },
  {
    id: 'ALERT-005',
    title: '关键系统文件发生未授权修改',
    severity: 'critical',
    affectedAsset: 'Web服务器-02',
    time: '3小时前'
  }
])

// 计算属性
const complianceStatus = computed(() => {
  if (complianceRate.value >= 90) return '高度合规';
  if (complianceRate.value >= 75) return '基本合规';
  if (complianceRate.value >= 60) return '需要改进';
  return '不合规';
});

const incidentTrend = computed(() => {
  return '较昨日 +1，较上周 -2';
});

// 辅助函数
function getRiskLevelClass(score) {
  if (score >= 80) return 'risk-high';
  if (score >= 60) return 'risk-medium';
  return 'risk-low';
}

function getRiskLevelDescription(score) {
  if (score >= 80) return '高风险 - 需要立即处理';
  if (score >= 60) return '中等风险 - 建议尽快处理';
  if (score >= 40) return '低风险 - 定期监控';
  return '风险较低 - 持续改进';
}

function getActivityIconClass(type) {
  const typeMap = {
    'scan_completed': 'scan',
    'vulnerability_fixed': 'fix',
    'compliance_check': 'compliance',
    'incident_resolved': 'incident',
    'baseline_deployed': 'baseline'
  };
  return typeMap[type] || 'default';
}

function getActivityIcon(type) {
  const typeMap = {
    'scan_completed': Search,
    'vulnerability_fixed': Check,
    'compliance_check': Check,
    'incident_resolved': Bell,
    'baseline_deployed': Setting
  };
  return typeMap[type] || Document;
}

function getAlertSeverityClass(severity) {
  return `severity-${severity}`;
}

function getAlertIcon(severity) {
  return severity === 'critical' ? Warning : Warning;
}

// 初始化图表
function initRiskTrendChart() {
  if (!riskTrendChart.value) return;
  
  const chart = echarts.init(riskTrendChart.value);
  
  // 模拟趋势数据
  const dates = [];
  const values = [];
  const now = new Date();
  
  for (let i = 29; i >= 0; i--) {
    const date = new Date(now);
    date.setDate(date.getDate() - i);
    dates.push(`${date.getMonth() + 1}/${date.getDate()}`);
    // 生成波动的风险评分数据
    values.push(65 + Math.random() * 20 - 10);
  }
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['风险评分']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: dates
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 100,
      axisLabel: {
        formatter: '{value}'
      }
    },
    series: [
      {
        name: '风险评分',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          color: '#f56c6c',
          width: 3
        },
        itemStyle: {
          color: '#f56c6c'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(245, 108, 108, 0.3)'
            },
            {
              offset: 1,
              color: 'rgba(245, 108, 108, 0.05)'
            }
          ])
        },
        data: values
      }
    ]
  };
  
  chart.setOption(option);
  return chart;
}

function initVulnerabilityChart() {
  if (!vulnerabilityChart.value) return;
  
  const chart = echarts.init(vulnerabilityChart.value);
  let option;
  
  if (vulnerabilityView.value === 'severity') {
    // 按严重程度分布
    option = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['严重', '高危', '中危', '低危']
      },
      series: [
        {
          name: '漏洞分布',
          type: 'pie',
          radius: '60%',
          center: ['50%', '50%'],
          data: [
            { value: criticalVulnerabilities.value, name: '严重', itemStyle: { color: '#f56c6c' } },
            { value: highVulnerabilities.value, name: '高危', itemStyle: { color: '#e6a23c' } },
            { value: mediumVulnerabilities.value, name: '中危', itemStyle: { color: '#67c23a' } },
            { value: 30, name: '低危', itemStyle: { color: '#409eff' } }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
  } else if (vulnerabilityView.value === 'type') {
    // 按漏洞类型分布
    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value'
      },
      yAxis: {
        type: 'category',
        data: ['SQL注入', 'XSS', 'CSRF', '命令注入', '缓冲区溢出', '权限控制', '其他']
      },
      series: [
        {
          name: '漏洞数量',
          type: 'bar',
          data: [12, 8, 5, 7, 3, 10, 31],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: '#83bff6' },
              { offset: 0.5, color: '#188df0' },
              { offset: 1, color: '#188df0' }
            ])
          }
        }
      ]
    };
  } else {
    // 按资产分布（柱状图）
    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['Web服务器', '应用服务器', '数据库服务器', '网络设备', '终端设备'],
        axisLabel: {
          interval: 0,
          rotate: 30
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '漏洞数量',
          type: 'bar',
          data: [24, 18, 15, 10, 9],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#ffecd2' },
              { offset: 1, color: '#fcb69f' }
            ])
          }
        }
      ]
    };
  }
  
  chart.setOption(option);
  return chart;
}

function initComplianceChart() {
  if (!complianceChart.value) return;
  
  const chart = echarts.init(complianceChart.value);
  
  // 模拟合规数据
  let complianceData;
  if (complianceStandard.value === 'all') {
    complianceData = [
      { name: 'ISO 27001', compliant: 85, nonCompliant: 15 },
      { name: 'PCI DSS', compliant: 72, nonCompliant: 28 },
      { name: 'NIST', compliant: 80, nonCompliant: 20 },
      { name: '自定义基线', compliant: 68, nonCompliant: 32 }
    ];
  } else {
    // 单一标准的详细合规情况
    complianceData = [
      { name: '访问控制', compliant: 75, nonCompliant: 25 },
      { name: '加密', compliant: 85, nonCompliant: 15 },
      { name: '审计', compliant: 90, nonCompliant: 10 },
      { name: '漏洞管理', compliant: 70, nonCompliant: 30 },
      { name: '事件响应', compliant: 65, nonCompliant: 35 }
    ];
  }
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['合规', '不合规']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: complianceData.map(item => item.name)
    },
    series: [
      {
        name: '合规',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          color: '#67c23a'
        },
        data: complianceData.map(item => item.compliant)
      },
      {
        name: '不合规',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          color: '#f56c6c'
        },
        data: complianceData.map(item => item.nonCompliant)
      }
    ]
  };
  
  chart.setOption(option);
  return chart;
}

function initIncidentChart() {
  if (!incidentChart.value) return;
  
  const chart = echarts.init(incidentChart.value);
  
  // 模拟事件趋势数据
  const dates = [];
  const criticalData = [];
  const highData = [];
  const mediumData = [];
  const lowData = [];
  
  const now = new Date();
  const days = incidentTimeRange.value === '7d' ? 7 : incidentTimeRange.value === '30d' ? 30 : 90;
  
  for (let i = days - 1; i >= 0; i--) {
    const date = new Date(now);
    date.setDate(date.getDate() - i);
    dates.push(`${date.getMonth() + 1}/${date.getDate()}`);
    
    // 生成模拟数据
    criticalData.push(Math.floor(Math.random() * 2));
    highData.push(Math.floor(Math.random() * 3));
    mediumData.push(Math.floor(Math.random() * 5));
    lowData.push(Math.floor(Math.random() * 8));
  }
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['严重', '高危', '中危', '低危']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: dates
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '严重',
        type: 'line',
        stack: 'Total',
        areaStyle: {
          color: '#f56c6c'
        },
        emphasis: {
          focus: 'series'
        },
        data: criticalData
      },
      {
        name: '高危',
        type: 'line',
        stack: 'Total',
        areaStyle: {
          color: '#e6a23c'
        },
        emphasis: {
          focus: 'series'
        },
        data: highData
      },
      {
        name: '中危',
        type: 'line',
        stack: 'Total',
        areaStyle: {
          color: '#67c23a'
        },
        emphasis: {
          focus: 'series'
        },
        data: mediumData
      },
      {
        name: '低危',
        type: 'line',
        stack: 'Total',
        areaStyle: {
          color: '#409eff'
        },
        emphasis: {
          focus: 'series'
        },
        data: lowData
      }
    ]
  };
  
  chart.setOption(option);
  return chart;
}

// 方法函数
function refreshDashboard() {
  loading.value = true;
  setTimeout(() => {
    // 更新最后刷新时间
    lastUpdateTime.value = new Date().toLocaleString('zh-CN');
    
    // 刷新图表
    refreshCharts();
    
    loading.value = false;
    ElMessage.success('仪表板已刷新');
  }, 1000);
}

function refreshCharts() {
  // 重新初始化所有图表
  initRiskTrendChart();
  initVulnerabilityChart();
  initComplianceChart();
  initIncidentChart();
}

function viewAllActivities() {
  ElMessage.info('查看所有活动功能将在后续版本中实现');
}

function viewAllAlerts() {
  ElMessage.info('查看所有警报功能将在后续版本中实现');
}

function handleAlert(alert) {
  ElMessage.info(`处理警报: ${alert.title}`);
}

function navigateTo(module) {
  // 在实际应用中，这里应该使用路由导航
  const moduleMap = {
    'security-compliance': '安全合规性',
    'security-knowledge-base': '安全知识库',
    'security-incident-response': '事件响应',
    'security-report': '安全报告',
    'security-baseline': '安全基线'
  };
  ElMessage.info(`导航到: ${moduleMap[module]}`);
}

// 监听图表配置变化，重新渲染图表
watch([chartTimeRange, vulnerabilityView, complianceStandard, incidentTimeRange], () => {
  refreshCharts();
});

// 响应式处理
function handleResize() {
  if (riskTrendChart.value) echarts.getInstanceByDom(riskTrendChart.value)?.resize();
  if (vulnerabilityChart.value) echarts.getInstanceByDom(vulnerabilityChart.value)?.resize();
  if (complianceChart.value) echarts.getInstanceByDom(complianceChart.value)?.resize();
  if (incidentChart.value) echarts.getInstanceByDom(incidentChart.value)?.resize();
}

// 生命周期钩子
onMounted(() => {
  // 设置初始刷新时间
  lastUpdateTime.value = new Date().toLocaleString('zh-CN');
  
  // 等待DOM渲染完成后初始化图表
  nextTick(() => {
    refreshCharts();
  });
  
  // 添加窗口大小改变监听
  window.addEventListener('resize', handleResize);
});

// 暴露给模板的数据和方法
defineExpose({
  // 响应式数据
  loading,
  lastUpdateTime,
  chartTimeRange,
  vulnerabilityView,
  complianceStandard,
  incidentTimeRange,
  riskTrendChart,
  vulnerabilityChart,
  complianceChart,
  incidentChart,
  overallRiskScore,
  totalVulnerabilities,
  criticalVulnerabilities,
  highVulnerabilities,
  mediumVulnerabilities,
  complianceRate,
  pendingIncidents,
  recentActivities,
  highPriorityAlerts,
  
  // 计算属性
  complianceStatus,
  incidentTrend,
  
  // 方法
  refreshDashboard,
  viewAllActivities,
  viewAllAlerts,
  handleAlert,
  navigateTo,
  getRiskLevelClass,
  getRiskLevelDescription,
  getActivityIconClass,
  getActivityIcon,
  getAlertSeverityClass,
  getAlertIcon
});
</script>

<style>
@import '../assets/compliance-style.css';

/* 仪表板特定样式 */
.security-dashboard-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.header-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.update-time {
  color: #606266;
  font-size: 14px;
}

/* 概览卡片样式 */
.overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.overview-card {
  transition: transform 0.2s, box-shadow 0.2s;
}

.overview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.card-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.card-icon.security-risk {
  background-color: #fef0f0;
  color: #f56c6c;
}

.card-icon.vulnerability {
  background-color: #fdf6ec;
  color: #e6a23c;
}

.card-icon.compliance {
  background-color: #f0f9eb;
  color: #67c23a;
}

.card-icon.incident {
  background-color: #ecf5ff;
  color: #409eff;
}

.card-info {
  flex: 1;
}

.card-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.card-value {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 4px;
}

.card-value.risk-high {
  color: #f56c6c;
}

.card-value.risk-medium {
  color: #e6a23c;
}

.card-value.risk-low {
  color: #67c23a;
}

.card-desc {
  font-size: 12px;
  color: #909399;
}

.severity-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  margin-right: 4px;
}

.severity-badge.critical {
  background-color: #fef0f0;
  color: #f56c6c;
}

.severity-badge.high {
  background-color: #fdf6ec;
  color: #e6a23c;
}

.severity-badge.medium {
  background-color: #f0f9eb;
  color: #67c23a;
}

/* 图表容器样式 */
.charts-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.chart-card {
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  font-weight: 600;
}

.chart {
  width: 100%;
}

/* 活动和警报样式 */
.activity-alerts-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.activity-list,
.alerts-list {
  max-height: 400px;
  overflow-y: auto;
}

.activity-item,
.alert-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #ebeef5;
}

.activity-item:last-child,
.alert-item:last-child {
  border-bottom: none;
}

.activity-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.activity-icon.scan {
  background-color: #ecf5ff;
  color: #409eff;
}

.activity-icon.fix {
  background-color: #f0f9eb;
  color: #67c23a;
}

.activity-icon.compliance {
  background-color: #f0f9eb;
  color: #67c23a;
}

.activity-icon.incident {
  background-color: #fef0f0;
  color: #f56c6c;
}

.activity-icon.baseline {
  background-color: #f4f4f5;
  color: #909399;
}

.activity-content {
  flex: 1;
}

.activity-text {
  margin-bottom: 4px;
  font-size: 14px;
}

.activity-time {
  font-size: 12px;
  color: #909399;
}

.alert-item {
  padding: 16px;
  border-radius: 8px;
  background-color: #f8f9fa;
}

.alert-item.severity-critical {
  background-color: #fef0f0;
  border-left: 4px solid #f56c6c;
}

.alert-item.severity-high {
  background-color: #fdf6ec;
  border-left: 4px solid #e6a23c;
}

.alert-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.alert-item.severity-critical .alert-icon {
  background-color: #f56c6c;
  color: white;
}

.alert-item.severity-high .alert-icon {
  background-color: #e6a23c;
  color: white;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: 500;
  margin-bottom: 4px;
}

.alert-info {
  font-size: 12px;
  color: #909399;
}

/* 快速访问样式 */
.quick-access-container {
  margin-bottom: 24px;
}

.quick-access-container h3 {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 600;
}

.quick-access-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}

.quick-access-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.quick-access-item:hover {
  background-color: #e9ecef;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.access-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 12px;
}

.access-icon.compliance {
  background-color: #f0f9eb;
  color: #67c23a;
}

.access-icon.knowledge {
  background-color: #ecf5ff;
  color: #409eff;
}

.access-icon.incident {
  background-color: #fef0f0;
  color: #f56c6c;
}

.access-icon.report {
  background-color: #fdf6ec;
  color: #e6a23c;
}

.access-icon.baseline {
  background-color: #f4f4f5;
  color: #909399;
}

.access-title {
  font-size: 14px;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .charts-container,
  .activity-alerts-container {
    grid-template-columns: 1fr;
  }
  
  .chart-card {
    min-height: 300px;
  }
}
</style>